<template>
  <div :ref="id" class="vue-chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        data: {
            type: Array,
            required: false,
            default: () => [
                ['周一', 120, 110],
                ['周二', 132, 80],
                ['周三', 101, 70],
                ['周四', 134, 90],
                ['周五', 90, 110],
                ['周六', 230, 130],
                ['周日', 210, 210],
            ],
        },
        xAxisStyle: {
            type: Object,
            required: false,
            default: () => ({
                color: '#333',
                show: true,
            })
        },
        yAxisStyle: {
            type: Object,
            required: false,
            default: () => ({
                color: '#333',
                show: true,
            })
        },
        color: {
            type: Array,
            required: false,
            default: () => ['#4e72b8', '#181d4b', '#f47920', '#aa2116', '#fcaf17'],
        },
    },
    data() {
        return {
            id: new Date().getTime().toString(),
        };
    },
    mounted() {
        this.myChart = echarts.init(this.$refs[this.id]);
        this.init();
        const resizeObserver = new ResizeObserver(entries => {
            if (this.myChart) {
                this.myChart.resize();
            }
        });
        resizeObserver.observe(this.$refs[this.id]);
    },
    methods: {
        init() {
            const xData = this.data.map(vo => vo[0]);
            const series = [];
            const seriesLen = this.data[0].length - 1;
            for (let i = 0; i < seriesLen; i++) {
                series.push({
                    data: this.data.map(vo => vo[i + 1]),
                    type: 'line',
                    showSymbol: false,
                    stack: 'Total',
                    areaStyle: {
                        color: this.color[i % this.color.length],
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    color: this.color[i % this.color.length],
                });
            }
            const targetOption = {
                grid: {
                    left: '0px',
                    bottom: '0px',
                    right: '0px',
                    top: '24px',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    axisLabel: this.xAxisStyle,
                    splitLine: {
                        show: false,
                    },
                    data: xData,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: this.yAxisStyle,
                    splitLine: {
                        show: true,
                    },
                    splitNumber: 3,
                },
                series,
            };
            this.myChart.setOption(targetOption);
        },
    }
}
</script>

<style lang="less" scoped>
.vue-chart-box {
    width: 100%;
    height: 100%;
}
</style>